<template>
  <div class="DailyUse">
    <div class="DailyUse_header">
      <div class="DailyUse_header1">
        <span
          v-for="(item, index) in list"
          :key="index"
          @click="active(item.linkDataId)"
          :class="item.linkDataId === listIdt ? 'active' : ''"
        >
          {{ item.linkDataName }}
        </span>
      </div>
    </div>
    <div class="DailyUse_cont1">
      <div class="DailyUse_cont2">
        <div
          v-for="(item, index) in newlist"
          :key="index"
          class="DailyUse_cont1_img"
        >
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="DailyUse_cont3">
          <div v-for="(item, index) in newlist2" :key="index">
            <img :src="item.goodsImgUrl" alt="" />
            <p class="p1">{{ item.goodsName }}</p>
            <div v-if="item.discountTag.length === 1" class="box3">
              <p class="p2">
                <span>{{ item.minGoodsPrice }}</span
                ><span>{{ item.discountTag[0] }}</span>
              </p>
              <p class="p3">折后￥<span>{{ item.goodsDiscountPrice }}</span>起</p>
            </div>
            <div v-if="item.discountTag === null" class="box4">
              <p class="p4">￥ <span></span> {{ item.minGoodsPrice }}起</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewIndexList, getGoodList } from "../server/";
export default {
  data() {
    return {
      list: [],
      listIdt: 118,
      newlist: [],
      newlist2: [],
    };
  },
  onLoad() {},
  methods: {
    active(linkDataId) {
      this.listIdt = linkDataId;
      this.newlist = this.list.filter((item) => item.linkDataId === linkDataId);
      console.log(this.newlist, "newlist.....");
      getGoodList({
        pageNo: 1,
        pageSize: 12,
        id: this.listIdt && this.listIdt,
        orderByType: 4,
        groupType: 1,
      }).then((ok) => {
        this.newlist2 = ok.result.frontGoodsList;
        console.log(ok.result.frontGoodsList, this.newlist2, "点击之后数据");
      });
    },
  },
  created() {
    getNewIndexList().then((ok) => {
      console.log(ok);
      this.list = ok.result[6].moduleLinkData;
      this.newlist = ok.result[6].moduleLinkData.filter(
        (item) => item.linkDataId === this.listIdt
      );
      console.log(this.list);
    });
    getGoodList({
      pageNo: 1,
      pageSize: 12,
      id: 118,
      orderByType: 4,
      groupType: 1,
    }).then((ok) => {
      this.newlist2 = ok.result.frontGoodsList;
      console.log(ok.result, "最下方的新数据");
    });
  },
};
</script>

<style scoped lang="scss">
.DailyUse {
  width: 100%;
  background-color: rgb(245, 245, 245);
  .DailyUse_header {
    width: 95%;
    height: 80rpx;
    overflow-x: scroll;
    .DailyUse_header1 {
      width: 160%;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      > span {
        display: inline-block;
        text-align: center;
        padding: 15rpx 10rpx 15rpx 7rpx;
      }
      > span.active {
        border-bottom: 4rpx solid #000;
      }
    }
  }
  .DailyUse_cont1 {
    width: 100%;
    margin-top: -10rpx;
    .DailyUse_cont2 {
      width: 95%;
      margin: 0 auto;
      .DailyUse_cont1_img {
        width: 100%;
        height: 240rpx;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .DailyUse_cont3 {
      margin: 10rpx auto;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: rgb(243, 233, 233);

      > div {
        width: 49%;
        background-color: white;
        margin-bottom: 15rpx;
        height: 620rpx;
        display: flex;
        flex-direction: column;
        > .p1 {
          width: 100%;
          white-space: pre-wrap;
          overflow: hidden;
          height: 83rpx;
          text-overflow: ellipsis;
          margin-top: 10rxp;
          color: rgb(148, 143, 143);
        }
        img {
          width: 100%;
          height: 60%;
        }
        .box3{
          flex: 1;
          .p2{
            margin-top: 10rpx;
            >span:nth-child(1){
              text-decoration:line-through;
              color: #ccc;
              font-size: 24rpx;
              margin-left: 10rpx;
              margin-right: 20rpx;
            }
            >span:nth-child(2){
                display: inline-block;
                padding: 3rpx;
                background-color: rgb(236, 205, 146);
                color: rgb(161, 68, 5);
                font-size: 26rpx;
            }
          }
          .p3{
            margin-top: 17rpx;
            font-size: 24rpx;
            span{
              font-weight: bold;
              font-size: 32rpx;
              font-family:"楷体 ";
            }
          }
          .p4{
            width: 100%;
            height: 177rpx;
            line-height: 177rpx;
          }
        }
        .box4{
          width: 100%;
          height: 176rpx;
          line-height: 176rpx;
        }
      }
    }
  }
}
</style>
